<template>
<el-container>
    <el-aside width="200px">
       <MemberMenu></MemberMenu>
    </el-aside>
 
<div class="formCss">
<el-form ref="data" :model="science" label-width="80px">
  <span style="font-size:20px;margin-left:120px;color:blue">部门任务提交:</span>  
   <el-form-item  label="任务名称:" class="type-input" prop="task">
       <el-select  v-model="science.taskId" clearable placeholder="请选择任务名称">
                    <el-option v-for="task in tasks" @click="option(science.taskId)" :key="task.id" :label="task.name" :value="task.id"></el-option>
                </el-select>   
                <span class="errCss">{{error.taskId}}</span> 
   </el-form-item>
   <el-form-item label="项目名称:" class="eventCss">
    <el-input   v-model="pro.project.name"></el-input>
  </el-form-item>
   <el-form-item label="材料:" class="logo-input" prop="logo">
                <img style="max-width: 100px" :src="picSrc"/>
                <input type="file" ref="pic" @change="fileLoad">
            </el-form-item>
  <el-form-item>
      <div class="butCss">
        <el-button align="center" type="primary"  @click="onSubmit();delSubmit()">保存</el-button>
        <el-button align="center" type="primary" @click="cancel">取消</el-button>
     </div>
          
  </el-form-item>
</el-form>
</div>
  
</el-container>
</template>

<script>
import MemberMenu from '@/components/menu/MemberMenu.vue'
import instance from '@/utlis/request.js'


export default {
    
    components: {
        MemberMenu,
        
    },
  data() {
       return {
            science:{ 
               task:{
                  projectId:""
               }
            },
            taskId:"",
        task:{
          id:"",
          name:"",
          submit:""

        },
        file:"",
        pro: {
          id:"",
          name:"",
          project:{
          name:""
          }
        },
        tasks:[],
        error:{
             taskId:"",
          }
        };
    },
     //钩子函数   一般用来初始化数据
    created:function(){
      this.initData();
     
    },
 
     methods: {
     //显示页面所有的任务功能
      initData(){
        var companyUser=window.sessionStorage.getItem("companyUserId");
        var companyUserObj = JSON.parse(companyUser);
        instance.get("task/member/list/"+companyUserObj).then(res=>{
          this.tasks=res.data.data;
        })
      },
        //任务提交的功能
      onSubmit() {

         //任务名称不能为空
          if(this.science.taskId==undefined){
             this.error.taskId="任务名称不能为空";
             return;
          }else{
               this.error.taskId="";
          }
          
        var companyUser=window.sessionStorage.getItem("companyUserId");
        var companyUserObj = JSON.parse(companyUser);
        this.science.companyUserId=companyUserObj  
        this.science.taskId=this.science.taskId;  
        var file=this.$refs.pic.files[0]; 
         var formData = new FormData();
            formData.append("file",file);
            console.log(file);
             formData.append("companyUserId",this.science.companyUserId);
             formData.append("taskId",this.science.taskId);
          instance.post("data/member/memberButton",formData, {headers:{'content-type':'multipart/form-data'}}).then(res=>{
               this.$router.push({path:"/MemberTaskStatus"});
             alert("任务提交成功");
          })
         
         
      },
      delSubmit(){

          //任务名称不能为空
          if(this.science.taskId==undefined){
             this.error.taskId="任务名称不能为空";
             return;
          }else{
               this.error.taskId="";
          }

          this.task.id=this.science.taskId;
           instance.post("task/member/updateSubmit",this.task).then(res=>{
                this.$router.push({path:"/MemberTaskStatus"});
             
          })
      },
      //显示页面所有的项目功能
      option(row){
         
        var companyUser=window.sessionStorage.getItem("companyUserId");
        var companyUserObj = JSON.parse(companyUser);
        this.task.companyUserId=companyUserObj;
        this.task.id=row;
       /* console.log(this.task.companyUserId);
        console.log(this.task.id);*/
        instance.post("task/member/findTaskById/",this.task).then(res=>{
          this.pro=res.data.data;
         
          console.log(res.data.data);
        })
      },
      fileLoad:function(){
           this.picSrc='';
           //this.picFile=event.target.files[0];     
           this.picFile=this.$refs.pic.files[0];
           
           //检查类型
           var fileName = this.picFile.name;
           var dotIndex = fileName.lastIndexOf(".");
           //没有扩展名
           if(dotIndex==-1){
               this.$refs.pic.focus();
               return;
           }
           //取出扩展名
           /*var ext = fileName.substring(dotIndex+1);
           if(",jpg,jpeg,png,bif,webp,pdf".indexOf(","+ext.toLowerCase()+",")==-1){
               this.$refs.pic.select();
               return;
           }*/
           //图片预览
           /*var reader = new FileReader();
           reader.readAsDataURL(this.picFile);
            var that = this;
           reader.onload=function(e){
               that.picSrc=this.result;
           }*/
          
           //检查大小
           var fileSize = this.picFile.size;
           console.log(fileSize);
           if(fileSize>1024*1024*100){
               this.$refs.pic.select();
               return;
           }
       },
      //取消功能
      cancel(){
          this.$router.push({path:"/MemberTaskStatus"});
      }

     }

}
</script>
<style scoped>
  
    
    .formCss{
          margin-left: 450px;
    }
    .errCss{
        color:red;
    }
     .eventCss{
      width: 300px;
    }
    .type-input{
      margin-top: 30px;
    }

   
</style>